<template>
        <nav class="header-wrapper">
            <span class="item icon"></span>
            <span class="item">小组</span>
            <span class="item">广播</span>
            <span class="item">图书</span>
            <span class="item">电影</span>
        </nav>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import "common/scss/variable.scss";
@import "common/scss/mixins.scss";
.header-wrapper {
  height: $header-height;
  font-size: $base-font-size;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0 18px;
  @include border-1px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-image: url("./douban.png");
  background-repeat: no-repeat;
  background-size: 46px 22px;
  background-position: 18px center;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  .item {
    margin-right: 19px;
    &.icon {
      display: block;
      width: 24.57143px;
      height: 18.28571px;
      background-image: url("./search.png");
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 4px;
      margin-right: 0;
    }
    &:nth-of-type(2) {
      color: #2ab8cc;
    }
    &:nth-of-type(3) {
      color: #e4a813;
    }
    &:nth-of-type(4) {
      color: #9f7860;
    }
    &:nth-of-type(5) {
      color: #2384e8;
    }
  }
}
</style>

